<template>
  <div :class="classNames">
    <div :class="`${prefixedClassName}-warp`">
      <a-page-header
        :breadcrumb="
          showBreadcrumb ? { routes: breadcrumb, itemRender: customBreadcrumbRender } : null
        "
        :title="title"
        :sub-title="subTitle"
        @back="handleBack"
      >
        <template v-if="$slots.tags" #tags>
          <slot name="tags" />
        </template>
        <template v-if="$slots.extra" #extra>
          <slot name="extra" />
        </template>
        <template v-if="$slots.footer || tabList.length > 0" #footer>
          <slot name="footer">
            <a-tabs v-if="tabList.length > 0" :active-key="tabActiveKey" @change="handleTabChange">
              <a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.tab" />
            </a-tabs>
          </slot>
        </template>
        <page-header-content
          v-if="$slots.content || $slots.extraContent"
          :prefix-cls="prefixedClassName"
        >
          <template v-if="$slots.content" #content>
            <slot name="content" />
          </template>
          <template v-if="$slots.extraContent" #extraContent>
            <slot name="extraContent" />
          </template>
        </page-header-content>
      </a-page-header>
    </div>
    <grid-content>
      <div v-if="$slots.default" :class="`${prefixedClassName}-children-content`">
        <slot />
      </div>
    </grid-content>
  </div>
</template>
<script lang="ts">
export interface Tab {
  key: string;
  tab: string | VNodeChild;
}

export interface Route {
  path: string;
  breadcrumbName: string;
  children: Array<{
    path: string;
    breadcrumbName: string;
  }>;
}

export interface BreadcrumbItemRender {
  route: Route;
  params: RouteParamsRaw;
  routes: Route[];
  paths: string[];
}
</script>
<script lang="ts" setup>
import type { VNodeChild } from 'vue';
import { h, withCtx, createTextVNode, computed } from 'vue';
import { useProProvider } from '../pro-provider';
import GridContent from '@/components/base-layouts/grid-content/index.vue';
import PageHeaderContent from './page-header-content.vue';
import { injectMenuState } from '@/layouts/use-menu-state';
import type { RouteParamsRaw } from 'vue-router';
import { RouterLink } from 'vue-router';
import { createVNode } from 'vue';
import type { PropType } from 'vue';
const props = defineProps({
  tabList: {
    type: Array as PropType<Tab[]>,
    default: (): Tab[] => [],
  },
  tabActiveKey: String,
  title: {
    type: [String, Boolean],
    default: false,
  },
  back: Function,
  prefixCls: {
    type: String,
    default: 'ant-pro',
  },
  showBreadcrumb: {
    type: Boolean,
    default: true,
  },
  subTitle: {
    type: [String, Boolean],
    default: false,
  },
  ghost: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['tab-change', 'update:tab-active-key', 'back']);
defineSlots<{
  default: () => any;
  tags: () => any;
  extra: () => any;
  footer: () => any;
  content: () => any;
  extraContent: () => any;
}>();
const config = useProProvider();
const { breadcrumb } = injectMenuState();
const prefixedClassName = computed(() => config.getPrefixCls('page-container'));
const classNames = computed(() => ({
  [prefixedClassName.value]: true,
  [`${prefixedClassName.value}-ghost`]: props.ghost,
}));
const handleBack = () => {
  if (props.back) {
    emit('back');
  }
};
const handleTabChange = (activeKey: string): void => {
  emit('tab-change', activeKey);
  emit('update:tab-active-key', activeKey);
};

// 自定义面包屑渲染逻辑
const customBreadcrumbRender = ({ route, params, routes }: BreadcrumbItemRender) => {
  const breadcrumbName = route.breadcrumbName;
  return (
    (routes.indexOf(route) === routes.length - 1 &&
      h('span', null, { default: withCtx(() => [createTextVNode(breadcrumbName)]) })) ||
    createVNode(
      RouterLink,
      { to: { path: route.path || '/', params } },
      { default: withCtx(() => [createTextVNode(breadcrumbName)]) },
    )
  );
};
</script>

<style lang="less">
#app-body {
  @import url('./index.less');
}
</style>
